{% from 'macros/icon.njk' import icon with context %}

<navigation-rail role="navigation" class="lg:pad-left-200 lg:pad-right-200" aria-label="{{ 'i18n.common.primary' | i18n(locale) }}" tabindex="-1">
  <div class="display-flex lg:display-none align-center pad-200 hairline-bottom">
    <button class="navigation-rail__close button display-flex align-center justify-content-center width-700 height-700" aria-label="{{ 'i18n.common.close' | i18n(locale) }}">
      {{ icon('close', {hidden: true}) }}
    </button>
    <div class="display-flex pad-left-200 pad-right-200">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="36" height="36">
        <use href="#chromeLogo" />
      </svg>
      <div class="logo__text logo__text-small">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="190" height="36">
          <use href="#chromeDevelopersText" />
        </svg>
      </div>
    </div>
  </div>
  <div class="display-flex direction-column pad-top-300 pad-right-200 lg:pad-right-0">
    {% for name, item in nav.rail %}
      {#
        Because the item url comes from the _data directory, it doesn't have a locale prefix.
        However, the page.url _does_ have a locale prefix.
        To figure out if this is the current active page we strip off the page.url locale prefix
        and pass the item.url and pageUrl to getLinkActiveState()
      #}
      {% set localePrefix = locale | absolute %}
      {% set pageUrl = page.url | replace(localePrefix, '') %}
      {% set activeState = helpers.getLinkActiveState(item.url, pageUrl) %}
      {% set iconName = name + '-active' if activeState else name %}
      <a href="{{ item.url }}" class="navigation-rail__link" {{ activeState | safe }}>
        <div class="navigation-rail__icon">
          {{ icon(iconName, {hidden: true}) }}
        </div>
        <span>{{ item.text | i18n(locale) }}</span>
      </a>
    {% endfor %}
  </div>
</navigation-rail>
